
import React,{useState} from 'react'
import { useTranslation } from 'react-i18next';
import PhoneNav from 'components/Nav/PhoneNav';
import PhoneFooter from 'components/Footer/PhoneFooter';
import './index.scss'
const appStore = require('assets/home/appStore.png')
const googlePlay = require('assets/home/googlePlay.png')
const uploadBtn = require('assets/home/contactUs-btn-phone@2x.png')
function WeChat() {
    const { t, i18n } = useTranslation();
    const enLanguage = i18n.language === 'en' ? true : false; // 英文 另外样式
    const [isHaveApp,setIsHaveApp] = useState(false);
    const anchorEvent = (anchorName: string) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) { anchorElement.scrollIntoView(); }
        }
    }
    const NotHaveAppNode=()=>(
      <>
        <p>
            {
                t('downloadTitle')
            }
        </p>
        <button className='uploadBtn btn1'>
            <img src={uploadBtn} className='btn-bg' alt="背景" />
            <img src={appStore} className='btn-icon' alt="AppStore" />
            <span className='btn-txt'>
                AppStore
                </span>
        </button>
        <button className='uploadBtn btn2'>
            <img src={uploadBtn} className='btn-bg' alt="背景" />
            <img src={googlePlay} className='btn-icon googlePlay' alt="googlePlay" />

            <span className='btn-txt btn-txt-google'>
                Goole Play
                </span>
        </button>
      </>
    );
      const HaveAppNode = ()=>(
        <button className='open_button'>
            <img src={uploadBtn} className='btn-bg' alt="背景" />
            <span>在App内打开</span>
        </button>
      );
    return (
        <div id='homePage' className={enLanguage ? 'homePage-phone phoneEnTxtStyle' : 'homePage-phone'}>
            {/* 头部 */}
            <PhoneNav anchorEvent={anchorEvent} />
            <main>
                <hgroup>
                    <div className='banner-p1'>
                        {
                            t('share_t1')
                        }
                    </div>
                    <div className='banner-p2'>  
                    「
                    <span>
                      
                    {
                        t('share_t2')
                      }
                    </span>
                      」
                    </div>
                    <div className='banner-p3'>
                        {
                            t('share_t3')
                        }
                    </div>
                </hgroup>
                {/* 联系我们 */}
                <div className='contact-us-txt'>
                    {
                      isHaveApp?<HaveAppNode />:<NotHaveAppNode />
                    }

                </div>

            </main>
            {/* 页脚 */}
            <PhoneFooter />
        </div>
    )
}

export default WeChat
